<template>
  <view>
    <div class="box">
      <div class="row">
        <div class="col">
          <div class="label">提款手续费开关</div>
          <t-radio-group v-model="form.withdrawFeeSwitch" default-value="1">
            <t-radio value="1">开</t-radio>
            <t-radio value="0">关</t-radio>
          </t-radio-group>
        </div>
        <div class="col">
          <div class="label">提款手续费(%)</div>
          <t-input v-model="form.withdrawFee" placeholder="请输入内容" />
          <div class="tag">%</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">周末是否可提现</div>
          <t-radio-group v-model="form.withdrawWeekend" default-value="1">
            <t-radio value="1">是</t-radio>
            <t-radio value="0">否</t-radio>
          </t-radio-group>
        </div>
        <div class="col">
          <div class="label">VIP0是否可提现</div>
          <t-radio-group v-model="form.internshipWithdraw" default-value="1">
            <t-radio value="1">是</t-radio>
            <t-radio value="0">否</t-radio>
          </t-radio-group>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">最低提现金额</div>
          <t-input v-model="form.minW" placeholder="请输入内容" />
        </div>
        <div class="col">
          <div class="label">最高提现金额</div>
          <t-input v-model="form.maxW" placeholder="请输入内容" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">提款限制金额</div>
          <t-input v-model="form.withdrawGrade" placeholder="请输入内容" />
          <div class="tag">逗号(,)分隔，例如 500,1000,2000</div>
        </div>
        <div class="col">
          <div class="label">提款时间限制</div>
          <t-input v-model="form.withdrawTime" placeholder="请输入内容" />
          <div class="tag">“-”号分隔，例如 8:00-20:00</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">每天提现次数</div>
          <t-input v-model="form.withdrawDailyTimes" placeholder="请输入内容" />
          <div class="tag">次</div>
        </div>
        <div class="col">
          <div class="label">每月提现次数</div>
          <t-input v-model="form.withdrawMonthTimes" placeholder="请输入内容" />
          <div class="tag">次，0或不填不限制</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">通道处理中计入提现次数</div>
          <t-radio-group v-model="form.withdrawProcessing" default-value="1">
            <t-radio value="1">是</t-radio>
            <t-radio value="0">否</t-radio>
          </t-radio-group>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">自定义金额</div>
          <t-radio-group v-model="form.withdrawDiyMoney" default-value="0">
            <t-radio value="1">开</t-radio>
            <t-radio value="0">关</t-radio>
          </t-radio-group>
        </div>
        <div class="col">
          <div class="label">自定义手续费</div>
          <t-input v-model="form.withdrawDiyFee" placeholder="请输入内容" />
          <div class="tag">%</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">快捷金额</div>
          <t-textarea v-model="form.withdrawFastMoney" placeholder="请输入内容" :autosize="{ minRows: 4 }" />
          <div class="tag">一行一个数字，不要有空行</div>
        </div>
      </div>
      <div class="row">
        <div class="col" style="align-items: start; flex-wrap: nowrap">
          <div class="label" style="margin-right: 10px">提现公告</div>
          <!-- v-model="data.leafDetail" @saveContent='saveContent' -->
          <TinymceEditor v-model="form.infoW" ref="editor"></TinymceEditor>
        </div>
      </div>
      <div class="btnBox">
        <t-button theme="primary" size="large" @click="onSubmit">立即提交</t-button>
        <t-button variant="outline" theme="default" size="large" @click="unGetSetting">重置</t-button>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
import TinymceEditor from '@/components/tinymceEditor/index.vue';
import { getSetting, addSetting, updateSetting } from '@/api/system/basicSetting/2';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';
interface FormDataType {
  id: string | number | null;
  withdrawFeeSwitch: string;
  withdrawFee: string;
  withdrawWeekend: string;
  internshipWithdraw: string;
  minW: string;
  maxW: string;
  withdrawGrade: string;
  withdrawTime: string;
  withdrawDailyTimes: string;
  withdrawMonthTimes: string;
  withdrawProcessing: string;
  withdrawDiyMoney: string;
  withdrawDiyFee: string;
  withdrawFastMoney: string;
  infoW: string;
}
const INITIAL_DATA: FormDataType = {
  id: null,
  // 提款手续费开关
  withdrawFeeSwitch: '1', // 默认开启
  // 提款手续费(%)
  withdrawFee: '',
  // 周末是否可提现
  withdrawWeekend: '1', // 默认允许
  // VIP0是否可提现
  internshipWithdraw: '1', // 默认允许
  // 最低提现金额
  minW: '',
  // 最高提现金额
  maxW: '',
  // 提款限制金额
  withdrawGrade: '',
  // 提款时间限制
  withdrawTime: '',
  // 每天提现次数
  withdrawDailyTimes: '',
  // 每月提现次数
  withdrawMonthTimes: '',
  // 通道处理中计入提现次数
  withdrawProcessing: '1', // 默认计入
  // 自定义金额开关
  withdrawDiyMoney: '0', // 默认关闭
  // 自定义手续费
  withdrawDiyFee: '',
  // 快捷金额
  withdrawFastMoney: '',
  // 提现公告
  infoW: '',
};
const form = ref({ ...INITIAL_DATA });

const emit = defineEmits(['handleClickDelete']);
// 提交
const onSubmit = () => {
  emit('handleClickDelete');
};
const submit = async () => {
  try {
    const res = form.value?.id ? await updateSetting(form.value) : await addSetting(form.value);
    if (res.code === 200) {
      MessagePlugin.success('提交成功');
      unGetSetting();
    }
  } catch (error) {
    console.log(error);
  }
};

// 获取配置
const unGetSetting = async () => {
  try {
    const res = await getSetting();
    form.value = res.data ? res.data : { ...INITIAL_DATA };
  } catch (error) {
    console.log(error);
  }
};

unGetSetting();

defineExpose({
  submit,
});
</script>
<style lang="less" scoped>
.box {
  padding: 10px;

  .row {
    display: flex;
    padding: 25px 0;

    &:nth-child(2n) {
      // background-color: #f2f2f2;
    }

    .col {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .label {
        width: 110px;
        font-size: 12px;
        text-align: right;
        word-wrap: break-word;
        word-break: break-word;
        color: #666;
      }

      .tag {
        min-width: 110px;
        font-size: 12px;
        color: #999;
      }
    }
  }

  .btnBox {
    display: flex;
    justify-content: center;
  }
}
</style>

<style class="less">
.col {
  .t-input__wrap {
    width: 240px;
    margin: 0 10px;

    & .t-input {
      height: 38px;
      font-size: 12px;
    }
  }

  .t-select__wrap {
    width: 240px;

    .t-select-input {
      width: 240px;
      height: 38px;
      font-size: 12px;
    }
  }

  .t-radio-group {
    margin: 0 10px;
  }

  .t-textarea {
    width: 400px;
    margin: 0 10px;

    .t-textarea__inner {
      width: 400px;
      font-size: 12px;
    }
  }

  .t-input-number.t-input-number--row {
    width: 240px;
    display: flex;
    align-items: center;
    padding: 0 38px;
    margin: 0 10px;

    .t-button.t-button--variant-outline.t-button--theme-default.t-button--shape-square.t-button--icon-only {
      width: 38px;
      height: 38px;
    }

    .t-input__wrap {
      min-width: 156px;
    }
  }
}
</style>
